<template>
  <div>
    <a-card>
      <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent"
        >新增</vxe-button
      >
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #action="{ row }">
          <vxe-button
            status="primary"
            content="编辑"
            @click="editRow(row)"
          ></vxe-button>
          <a-popconfirm
            title="确定删除吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="remove(row)"
          >
            <vxe-button status="primary" content="删除"></vxe-button>
          </a-popconfirm>
        </template>
      </vxe-grid>
    </a-card>
    <DraggableModal
      v-model:open="showEditPopup"
      title="新增类型"
      :keyboard="false"
      @ok="confirmEvent"
    >
      <vxe-form ref="formRef" v-bind="formOptions"></vxe-form>
    </DraggableModal>
  </div>
</template>

<script setup lang="ts">
import { VxeUI } from "vxe-pc-ui";
import Api from "@/api/backend/api";
const { gridOptions } = useRepairType();
import XEUtils from "xe-utils";
const formRef = ref();
const showEditPopup = ref(false);
const loading = ref(false);
const selectRow = ref<RowVO>();
const defaultData: RowVO = {
  id: null,
  name: "",
  CodepenCircleFilled: "",
};

const formOptions = reactive<VxeFormProps<RowVO>>({
  titleWidth: 80,
  titleAlign: "right",
  titleColon: true,
  data: XEUtils.clone(defaultData, true),
  rules: {
    name: [
      { required: true, message: "请输入名称" },
      { min: 1, message: "长度不能小于1" },
    ],
    code: [{ required: true, message: "请输入编码" }],
  },
  items: [
    {
      field: "name",
      title: "名称",
      span: 12,
      itemRender: { name: "VxeInput" },
    },
    {
      field: "code",
      title: "编码",
      span: 12,
      itemRender: { name: "VxeInput" },
    },
  ],
});
const addEvent = () => {
  selectRow.value = undefined;
  formOptions.data = XEUtils.clone(defaultData, true);
  showEditPopup.value = true;
};

const editRow = (row: RowVO) => {
  selectRow.value = row;
  formOptions.data = Object.assign(XEUtils.clone(defaultData, true), row);
  showEditPopup.value = true;
};

const confirmEvent = async () => {
  const $form = formRef.value;
  if ($form) {
    const errMap = await $form.validate();

    if (!errMap) {
      if ($form.data.id) {
        await Api.repairTypeController.update(
          { id: $form.data.id },
          $form.data
        );
      } else {
        await Api.repairTypeController.store($form.data);
      }
      showEditPopup.value = false;
      xGrid.value.commitProxy("query");
    }
  }
};
const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};

const remove = async (row: any) => {
  console.log(row);
  await Api.repairTypeController.destroy({ id: row.id });
  xGrid.value.commitProxy("query");
};
</script>

<style></style>
